---
export type Props = {
	sponsoredBy: string;
	becomeASponsor: string;
};

import { Image } from 'astro:assets';
import { LinkCard } from '@astrojs/starlight/components';

import shorebirdLight from '~/assets/sponsors/shorebird-light.png';
import shorebirdDark from '~/assets/sponsors/shorebird-dark.png';
import stream from '~/assets/sponsors/stream.png';
import rettel from '~/assets/sponsors/rettel.png';

const { sponsoredBy = 'Sponsored with 💖 by', becomeASponsor = 'Become a Sponsor' } = Astro.props;

interface DynamicImageMetadata {
	light: ImageMetadata;
	dark: ImageMetadata;
}
interface Sponsor {
	img: DynamicImageMetadata | ImageMetadata;
	href: string;
	alt: string;
	invert: boolean;
}

const sponsors: Sponsor[] = [
	{
		alt: 'Shorebird Logo',
		img: {
			light: shorebirdLight,
			dark: shorebirdDark,
		},
		href: 'https://shorebird.dev',
		invert: false,
	},
	{
		alt: 'Stream Logo',
		img: stream,
		href: 'https://getstream.io/chat/flutter/tutorial/?utm_source=Github&utm_medium=Github_Repo_Content_Ad&utm_content=Developer&utm_campaign=Github_Jan2022_FlutterChat&utm_term=bloc',
		invert: true,
	},
	{
		alt: 'Rettel Logo',
		img: rettel,
		href: 'https://rettelgame.com',
		invert: true,
	},
];

function isDynamicImage(
	value: DynamicImageMetadata | ImageMetadata
): value is DynamicImageMetadata {
	return value.hasOwnProperty('light') && value.hasOwnProperty('dark');
}
---

<style>
	:global([data-theme='dark']) .invert-logo {
		filter: invert() grayscale() contrast(200%) saturate(200%);
	}
	:global([data-theme='dark']) .logo {
		filter: grayscale() contrast(200%) saturate(200%);
	}
</style>

<div class="flex w-full justify-center no-content">
	<p class="text-xl font-semibold">{sponsoredBy}</p>
</div>
<div class="flex w-full justify-center items-center not-content">
	<div class="grid grid-cols-1 sm:gap-4 sm:grid-cols-3">
		{
			sponsors.map((sponsor) => {
				return (
					<div class="flex flex-row justify-center items-center">
						<a href={sponsor.href} aria-label={sponsor.alt}>
							{isDynamicImage(sponsor.img) ? (
								<>
									<Image
										class={`${sponsor.invert ? 'invert-logo' : 'logo'} dark:sl-hidden`}
										src={sponsor.img.light}
										width={300}
										style="width:150px;height:auto"
										alt={sponsor.alt}
										loading="eager"
									/>
									<Image
										class={`${sponsor.invert ? 'invert-logo' : 'logo'} light:sl-hidden`}
										src={sponsor.img.dark}
										width={300}
										style="width:150px;height:auto"
										alt={sponsor.alt}
										loading="eager"
									/>
								</>
							) : (
								<Image
									class={sponsor.invert ? 'invert-logo' : 'logo'}
									src={sponsor.img}
									width={300}
									style="width:150px;height:auto"
									alt={sponsor.alt}
									loading="eager"
								/>
							)}
						</a>
					</div>
				);
			})
		}
	</div>
</div>

<div class="w-full flex text-center items-center justify-center">
	<LinkCard
		title={becomeASponsor}
		href="https://github.com/sponsors/felangel"
		target="_blank"
		rel="noreferrer"
	/>
</div>
